<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="MobileOptimized" content="width" >
<meta name="HandheldFriendly" content="true" >
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="default" />

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>

<script type='text/javascript'>
$(document).ready(function () {	
	contactSelectionsVar = $('#contactSelections');
	setCategoryList();	
});

 function setCategoryList(){
// contactSelectionsVar.listview.empty();
var jsonText = Android.getCategoriesJSON();
	var tmpJson = $.parseJSON(jsonText);	
	if(tmpJson != null && tmpJson.categories != null){
		var tmpContacts = tmpJson.categories;
		for(i = 0; i < tmpContacts.length; i++){
			var tmpDisplayName = tmpContacts[i].name;
			var tmpContactId = tmpContacts[i].id;					
			var tmpLiFragment = '<li><a href="javascript:showSubcategory(' +  
              tmpContactId + ');return false;">'+tmpDisplayName+'</a></li>';
			contactSelectionsVar.append(tmpLiFragment);		
		}
	}	
	contactSelectionsVar.listview('refresh'); 	
} 

function showSubcategory(tmpId){
	contactSupport.showContact(tmpId,DETAIL_PAGE);
}

</script>

<script type="text/javascript">
    function showAndroidToast(toast) {
        Android.showToast(toast);
    }
</script>


<body>

<!-- home -->	
<div id="categoriesDemo" data-role="page">

<div data-role="header">
	<h4>AppUp Categories</h4>
</div>

	<div data-role="content">
		<div class="content-primary">
			<ul data-role="listview" data-dividertheme="c" id="contactSelections"></ul>
		</div>
	</div>
	<input type="button" value="Click!" onClick="showAndroidToast('Hello Android!')" />
</div>

</body>
</html>